<template>
    <el-dialog :close-on-click-modal="false" :append-to-body="true" title="提示" :visible.sync="dialogshow" width="450px" @close="$emit('update:dialogVisible', false)" v-loading="loading">
        <el-form :model="quota" v-model="quota" ref="addquotas" :rules="rules" label-width="80px">
            <dialog-wrapper :MaxWidth="400">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="amount" label="支付金额">
                            <el-input v-model.number="quota.amount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="real_amount" label="到账金额">
                            <el-input v-model.number="quota.real_amount"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
    
                <el-row>
                    <el-col>
                        <el-form-item label="二维码：">
                            <!--<el-input v-model="DetailInfo.qr_code" placeholder="..."></el-input>-->
                            <el-upload ref="uploadQr" :file-list="fileList" class="uploadQr" :auto-upload="false" action="" list-type="picture-card" :limit=1 :on-change="handlePictureCardPreview">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <span style="color: #169ed7">请设置好收款码金额后再上传二维码</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </dialog-wrapper>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:dialogVisible', false)">取 消</el-button>
            <el-button type="primary" @click="confirmok();">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import DialogWrapper from '@/components/DialogWrapper'
import { getQiniuUploadToken, qiniuUpload } from '@/api'
import { debuglog } from 'util';
import { truncate } from 'fs';
export default {
    components: { DialogWrapper },
    data() {
        let validateAmount = (rule, value, callback) => {
            if (value <= 0) {
                callback(new Error('不能为空'));
            } else {
                callback();
            }
        };
        return {
            dialogshow: false,
            quota: { amount: null, real_amount: null, qr_code: '' },
            rules: {
                amount: [{ validator: validateAmount, trigger: 'blur' }],
                real_amount: [{ validator: validateAmount, trigger: 'blur' }],
            },
            loading: false,
            fileList: [],
        }
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        DetailInfo: { type: Array }
    },
    methods: {
        confirmok() {
            let self = this
            this.$refs.addquotas.validate(valid => {
                if (valid) {
                    if (!self.DetailInfo) {
                        self.DetailInfo = new Array()
                    }

                    if (self.quota.qr_code == '') {
                        self.$confirm('<div style="text-align:left;">1.您当前没有上传任何收款二维码，无法支持自动下发二维码功能。需要您和用户确认支付金额后自行生成二维码并发送给玩家。<p/><p/><br>2.请确保您的账户支持花呗收款功能。</div>', "温馨提示", {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                dangerouslyUseHTMLString: true,
                                //   type: 'warning',
                                center: true
                            })
                            .then(() => {
                                // self.DetailInfo.push({ amount: self.quota.amount, real_amount: self.quota.real_amount, qr_code: self.quota.qr_code })
                                // self.quota= { amount: null, real_amount: null, qr_code: '' }
                                // self.fileList=[]
                                // self.$emit('update:dialogVisible', false)
                            })
                    } else {

                        let checkObj = self.DetailInfo.find(function(value, index, arr) {
                            return value.amount === self.quota.amount;
                        })
                        if(!checkObj)
                        {
                        self.DetailInfo.push({ amount: self.quota.amount, real_amount: self.quota.real_amount, qr_code: self.quota.qr_code })
                        self.quota = { amount: null, real_amount: null, qr_code: '' }
                        self.fileList = []
                        self.$emit('update:dialogVisible', false)}
                        else{
                            this.$message({ message: '已经添加了此档位，请换档位，或者删除存在的档位', type: 'error' })
                        }
                    }
                }
            })


        },
        handlePictureCardPreview(f) {
            let self = this
            self.loading = true
            getQiniuUploadToken().then(res => {
                if (res.status === 0) {
                    let data = new FormData()
                    var fileName = new Date().getTime()+f.name.substring(f.name.lastIndexOf('.'));
                    data.append('file', f.raw)
                    data.append('key', fileName)
                    data.append('token', res.data.token)
                    qiniuUpload(data).then(res => {
                        self.quota.qr_code = res.key
                        self.loading = false
                        // this.$set(this.quota, 'qr_code', res.key)
                    }).catch(() => {
                        self.loading = false
                    })
                }
            }).catch(() => {
                self.loading = false
            })
        },
    },
    watch: {
        dialogVisible() {
            this.dialogshow = this.dialogVisible
        },
    }


}
</script>
